<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>客户地区统计</title>
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
	<script type="text/javascript"
		src="${ctx}/resources/echarts/js/echarts.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/resources/jquery/js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
		$.get("${ctx}/stat/loadCustomerAreaStatJson.action", function(data) {
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
				title : {
					text : '汽车出租系统-客户地区统计',
					subtext : '后台数据库统计生成',
					left : 'center'
				},
				tooltip : {
					trigger : 'item',
					formatter : '{a} <br/>{b} : {c} ({d}%)'
				},
				legend : {
					orient : 'vertical',
					left : 'left',
					data : data
				},
				series : [ {
					name : '客户地区',
					type : 'pie',
					radius : '55%',
					center : [ '50%', '60%' ],
					data : data,
					emphasis : {
						itemStyle : {
							shadowBlur : 10,
							shadowOffsetX : 0,
							shadowColor : 'rgba(0, 0, 0, 0.5)'
						}
					}
				} ]
			};
			;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		});
	</script>
</body>
</html>